<template>
    <div style="padding: 10px;">
        <lay-out-table-form>
<!--            <nh-search-form :data="jsondata" ref="GenerateForm">-->
<!--            </nh-search-form>-->
            <el-form ref="cusForm"
                     :model="models"
                     :rules="rules"
                     label-suffix=":"
                     :size="jsondata.config.size"
                     :label-position="jsondata.config.labelPosition"
                     :label-width="jsondata.config.labelWidth + 'px'">
<!--                style="display: none;"-->
<!--              <template>-->
<!--                  <el-form-item label="测试" prop="text_tt" >-->
<!--                      <el-input v-model="models.text_tt"/>-->
<!--                  </el-form-item>-->
<!--              </template>-->
<!--                <text-te :models="models"></text-te>-->
                <recursive-components ref="recursive"
                                      :sign="jsonSign"
                                      :data="jsondata.list"
                                      :cusmodel.sync="models" >
                    <template slot="search-button" slot-scope="scope">
                        <div style="text-align: right;">
                            <el-button class="search-form-btn" size="small" type="primary" @click="searchData('cusForm')">检索</el-button>
                            <el-button size="small" plain @click="resetParam('cusForm')">重置</el-button>
                        </div>
                    </template>
                    <template slot="luIncidentVO_type" slot-scope="scope">
                        <dictionary-select-option
                                ref="luIncidentVO_type"
                                :widget="scope"
                                @searchOptionData="searchDictionary('INCIDENT_TYPE',1,'luIncidentVO_type')"
                        ></dictionary-select-option>
                    </template>
                    <template slot="luIncidentVO_scale" slot-scope="scope">
                        <dictionary-select-option
                                ref="luIncidentVO_scale"
                                :widget="scope"
                                @searchOptionData="searchDictionary('INCIDENT_OPTION',1,'luIncidentVO_scale')"
                        ></dictionary-select-option>
                    </template>
                    <template slot="luIncidentVO_thinPlace" slot-scope="scope">
                        <dictionary-select-option
                                ref="luIncidentVO_thinPlace"
                                :widget="scope"
                                @searchOptionData="searchDictionary('CITY_OPTION',1,'luIncidentVO_thinPlace')"
                        ></dictionary-select-option>
                    </template>
                </recursive-components>
            </el-form>
        </lay-out-table-form>
        <lay-out-table>
            <data-grid
                    :tabColumn="tabColumn"
                    :tabData="tabData"
                    :heightSubtract="heightSubtract"
                    :headerRowClassName="headerRowClassName"
                    :headerCellClassName="headerCellClassName"
                    :rowClassName="rowClassName"
                    :cellClassName="cellClassName"
                    :isSelection="isSelection"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :total="total"
                    :page-sizes="pageSizes"
                    :class="pageClass"
                    @handleSelectionChange="handleSelectionChange"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"
            >
                <template #batch-operation>

                    <el-button @click="handleOpen('',{},'add')">新增</el-button>

                </template>
                <template #extend-column>
                    <el-table-column label="操作" width="180px">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleOpen(scope.$index, scope.row,'add')">编辑
                            </el-button>
                            <el-button size="mini" type="danger" @click="handleOpen(scope.$index, scope.row,'detail')">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </data-grid>
            <single-data-operation
                    :dialogAttributes="dialogAttributes"
                    :dialogType="dialogType"
                    :dialogVisible="dialogVisible"
                    :formFields="formFields"
                    :dataDetail="dataDetail"
                    :formRules="formRules"
                    @handleColos="handleColos"
                    @handleSubmit="handleSubmit"
            />
        </lay-out-table>
    </div>
</template>

<script>
    import {dictionaryByType} from '../../api/dictionary';
    import {searchManyConditions} from '../../api/data';
    import DictionarySelectOption from "../../../packages/From/DictionarySelectOption";
    import LayOutTable from "../LayOut/LayOutTable";
    import LayOutTableForm from "../LayOut/LayOutTableForm";

    import PubSub from 'pubsub-js';
    const tempSign = new Date().getTime(); // 时间戳标识，刷新页面时，只生成一次
    export default {
        name: "pageDemo",
        components: { LayOutTableForm, LayOutTable, DictionarySelectOption},
        props: {

        },
        data(){
            return{
                //form页面头部组件---开始
                models: { // 表单绑定的models
                    text_tt:''
                },
                rules: { //表单绑定的校验规则
                    text_tt: [{required: true, message: '请填写设备型号', trigger: 'blur'}],
                    luIncidentVO_referPersons: [{required: true, message: '请填写设ccc'}],
                    luIncidentVO_scale: [{required: true, message: '请填写设vvvv'}],
                },
                pageNum: 1,
                pageSize: 10,
                jsonSign: tempSign,
                jsondata: {
                        "list": [
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "columns": [
                                    {
                                        "span": 8,
                                        "list": [{
                                            "type": "datetime",
                                            "name": "时间区间",
                                            "options": {
                                                "defaultValue":  ['2019-06-10 10:00:00', '2019-10-10 13:00:00'],//也支持date
                                                "defaultStartTime": "00:00:00",
                                                "defaultEndTime": "23:59:59",
                                                "style": {"width":"100%"},
                                                "readonly": false,
                                                "disabled": false,
                                                "editable": true,
                                                "clearable": true,
                                                "placeholder": "选择时间",
                                                "startPlaceholder": "开始时间",
                                                "endPlaceholder": "结束时间",
                                                "type": "datetimerange",
                                                "rangeSeparator": "-",
                                                "format": "yyyy-MM-dd HH:mm:ss", //yyyy-MM-dd 显示的格式，有效
                                                "valueFormat":"yyyy-MM-dd HH:mm:ss",
                                                "timestamp": false, //时间戳  false | 使用format的时间格式 true|使用时间戳
                                                "class": "",//
                                                "callbackEvent":{
                                                    "focus":"removeClearText"
                                                }
                                            },
                                            "model": "datetime1",
                                        }]
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "blank",
                                                "name": "所属辖区",
                                                "options": {
                                                    "defaultType": "String",
                                                    "class": "",
                                                    "style": {},
                                                },
                                                "model": "luIncidentVO_thinPlace",
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "input",
                                                "name": "事件名称",
                                                "options": {
                                                    "style": {"width":"100%"},
                                                    "defaultValue": "",
                                                    "type": "string",
                                                    "pattern": "",
                                                    "placeholder": "",
                                                    "class": "",
                                                    "disabled": false,
                                                },
                                                "model": "luIncidentVO_name",
                                                /*"rules": [
                                                    { required: true, message: '请输入', trigger: 'blur' },
                                                    // { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                                                ]*/
                                            }

                                        ]
                                    },
                                    {
                                        "span": 4,
                                        "list": [

                                        ]
                                    },
                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "class": "",
                                },
                                "model": "grid_1566875758270",
                            },
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "icon": "icon-grid-",
                                "columns": [
                                    {
                                        "span": 12,
                                        "list": [
                                            {
                                                "type": "grid",
                                                "name": "栅格布局",
                                                "icon": "icon-grid-",
                                                "columns": [
                                                    {
                                                        "span": 12,
                                                        "list": [
                                                            {
                                                                "type": "grid",
                                                                "name": "栅格布局",
                                                                "icon": "icon-grid-",
                                                                "columns": [
                                                                    {
                                                                        "span": 12,
                                                                        "list": [
                                                                            {
                                                                                "type": "input",
                                                                                "name": "单行文本",
                                                                                "icon": "icon-input",
                                                                                "options": {
                                                                                    "width": "100%",
                                                                                    "defaultValue": "",
                                                                                    "required": false,
                                                                                    "dataType": "string",
                                                                                    "pattern": "顶顶顶顶顶顶顶顶顶v",
                                                                                    "placeholder": "",
                                                                                    "customClass": "",
                                                                                    "disabled": false,
                                                                                    "remoteFunc": "func_1567077340024"
                                                                                },
                                                                                "novalid": {},
                                                                                "key": "1567077340024",
                                                                                "model": "input_1567077340024",
                                                                                /*"rules": [
                                                                                    {
                                                                                        "type": "string",
                                                                                        "message": "单行文本格式不正确"
                                                                                    },
                                                                                    {
                                                                                        "required": true,
                                                                                        "message": "单行文本必须填写"
                                                                                    }
                                                                                ]*/
                                                                            }
                                                                        ]
                                                                    },
                                                                    {
                                                                        "span": 12,
                                                                        "list": []
                                                                    }
                                                                ],
                                                                "options": {
                                                                    "gutter": 0,
                                                                    "justify": "start",
                                                                    "align": "top",
                                                                    "customClass": "",
                                                                    "remoteFunc": "func_1567077334689"
                                                                },
                                                                "novalid": {},
                                                                "key": "1567077334689",
                                                                "model": "grid_1567077334689",
                                                                // "rules": []
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "span": 12,
                                                        "list": []
                                                    }
                                                ],
                                                "options": {
                                                    "gutter": 0,
                                                    "justify": "start",
                                                    "align": "top",
                                                    "customClass": "",
                                                    "remoteFunc": "func_1567077330514"
                                                },
                                                "novalid": {},
                                                "key": "1567077330514",
                                                "model": "grid_1567077330514",
                                                // "rules": []
                                            }
                                        ]
                                    },
                                    {
                                        "span": 12,
                                        "list": [
                                            {
                                                "type": "grid",
                                                "name": "栅格布局",
                                                "icon": "icon-grid-",
                                                "columns": [
                                                    {
                                                        "span": 12,
                                                        "list": []
                                                    },
                                                    {
                                                        "span": 12,
                                                        "list": []
                                                    }
                                                ],
                                                "options": {
                                                    "gutter": 0,
                                                    "justify": "start",
                                                    "align": "top",
                                                    "customClass": "",
                                                    "remoteFunc": "func_1567077332859"
                                                },
                                                "novalid": {},
                                                "key": "1567077332859",
                                                "model": "grid_1567077332859",
                                                // "rules": []
                                            }
                                        ]
                                    }
                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "customClass": "",
                                    "remoteFunc": "func_1567077328809"
                                },
                                "key": "1567077328809",
                                "model": "grid_1567077328809",
                                // "rules": []
                            },
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "icon": "icon-grid-",
                                "columns": [
                                    {
                                        "span": 8,
                                        "list": [
                                            {
                                                "type": "blank",
                                                "name": "事件规模",
                                                "options": {
                                                    "defaultType": "String",
                                                    "class": "",
                                                    "style": {"width":"100%"},
                                                },
                                                "model": "luIncidentVO_scale",
                                            }
                                        ]
                                    },

                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "blank",
                                                "name": "事件类型",
                                                "icon": "icon-ic",
                                                "options": {
                                                    "defaultType": "String",
                                                    "class": "",
                                                    "style": {"width":"100%"},
                                                },
                                                "model": "luIncidentVO_type",
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "input",
                                                "name": "涉及人数",
                                                "options": {
                                                    "style": {"width":"100%"},
                                                    "defaultValue": "",
                                                    "type": "string",
                                                    "pattern": "",
                                                    "placeholder": "",
                                                    "class": "",
                                                    "disabled": false,
                                                },
                                                "model": "luIncidentVO_referPersons",
                                            }
                                        ]
                                    },
                                    {
                                        "span": 4,
                                        "list": [
                                            {
                                                "type": "blanks",
                                                "model":"search-button",
                                            }
                                        ]
                                    }
                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "class": "",
                                },
                                "model": "grid_1566875795427",
                            },

                        ],
                        "config": {
                            "labelWidth": 100,
                            "labelPosition": "right",
                            "size": "small",
                            "class": "",
                        }
                    },
                //form页面头部组件---结束
                //table属性
                // tabAttributes:{
                    heightSubtract: 290,//table高度自适应，计算其他组件高度
                    isSelection: true,//是否多选
                    isStripe: true,//是否斑马线
                    headerRowClassName: 'm-header-row-style',//头部行样式
                    headerCellClassName: 'm-header-cell-style',//头部列样式
                    rowClassName: 'm-row-style',//table行样式
                    cellClassName: 'm-cell-style',//table列样式
                // },

                //显示的列
                tabColumn: [
                    {prop: "thinPlaceName", label: "所属辖区", minWidth: "10%", showTooltip: true},
                    {prop: "takeTime", label: "发生时间", minWidth: "15%", showTooltip: true},
                    {prop: "takePlace", label: "事件名称", minWidth: "10%", showTooltip: true},
                    {prop: "typeName", label: "事件类型", minWidth: "10%", showTooltip: true},
                    {prop: "scaleName", label: "事件规模", minWidth: "10%", showTooltip: true},
                    {prop: "referPersons", label: "涉及人数", minWidth: "10%", showTooltip: true},
                    {prop: "handleStatusName", label: "事件状态", minWidth: "10%", showTooltip: true},
                    {prop: "registerTime", label: "登记时间", minWidth: "15%", showTooltip: true},
                ],
                //table数据
                tabData: [],
                //分页属性
                // pageAttributes: {
                //     pageNum: 1,
                //     pageSize: 16,
                    total: 30,
                    pageSizes: [10, 20, 50, 60],
                    pageClass: 'page-test',
                // },

                //------------单数据操作
                //弹出框属性
                dialogAttributes: {
                    title: '单数据操作',
                    width: '50vw'
                },
                //是否显示
                dialogVisible: false,
                //弹出框类型  detail = 详情    add = 新增/修改
                dialogType: 'add',// detail or add
                //表单字段
                formFields: [
                    {label: '所属辖区', field: 'thinPlaceName', type: 'select'},
                    {label: '发生时间', field: 'takeTime', type: 'dateTime'},
                    {label: '事件名称', field: 'takePlace', type: 'input'},
                    {label: '事件类型', field: 'typeName', type: 'select'},
                    {label: '事件规模', field: 'scaleName', type: 'select'},
                    {label: '涉及人数', field: 'referPersons', type: 'input'},
                    {label: '事件状态', field: 'handleStatusName', type: 'select'},
                    {label: '登记时间', field: 'registerTime', type: 'input'},
                ],
                //表单验证规则
                formRules: {
                    thinPlaceName: [{required: true, message: '请选择所属辖区', trigger: 'change'}],
                    typeName: [{required: true, message: '请选择事件类型', trigger: 'change'}],
                    scaleName: [{required: true, message: '请选择事件规模', trigger: 'change'}],
                    handleStatusName: [{required: true, message: '请选择事件状态', trigger: 'change'}],
                    takeTime: [{required: true, message: '请输入发生时间', trigger: 'blur'}],
                    takePlace: [{required: true, message: '请输入事件名称', trigger: 'blur'}],
                    referPersons: [{required: true, message: '请输入涉及人数', trigger: 'blur'}],
                    registerTime: [{required: true, message: '请输入登记时间', trigger: 'blur'}],
                },
                //数据详情
                dataDetail: {},

            }
        },
        created () {
            this.generateModle(this.jsondata.list);
            let self = this;
            // setTimeout(function(){
                PubSub.publish('goal-node' + self.jsonSign,{goalTag:self});
            // },1000);
        },
        methods:{
            generateModle (genList) {
                for (let i = 0; i < genList.length; i++) {
                    if (genList[i].type === 'grid') {
                        genList[i].columns.forEach(item => {
                            this.generateModle(item.list);
                        })
                    } else {
                        if (genList[i].type !== 'blanks') {
                            //赋值默认值
                            this.models[genList[i].model] = genList[i].options.defaultValue;
                        }
                    }
                }
            },
            //处理arrary深拷贝，浅拷贝的问题
            setArray(row){
                let arr = [];
                arr = JSON.parse(JSON.stringify(row.abilityList));
                return arr;
            },
            //处理object深拷贝，浅拷贝的问题
            setObject(row){
                let param = Object.assign({}, row);
                return param;
            },
            // 字典请求接口， 如果字典返回的value 要求name和value 都返回， 回调的方法会从组件中抽离出来 sign : 1|code   2|code  name
            searchDictionary(type, sign,refsName){
                dictionaryByType({params: {type: type}}).then(res => {
                    const data = [];
                    for (let item of res.data.result) {
                        data.push({
                            label: item.name,
                            value: sign===1?item.code:(item.code+','+item.name),
                            id: item.id,
                            parentId: item.pid,
                        })
                    }
                    this.$refs[refsName].optionArr = data;
                });
            },
            searchData(form){
                //TODO 自定义的组件手动赋值
                let tempParam  = this.$refs.recursive.getModel();
               console.log("result--",tempParam)
                tempParam.luIncidentVO_type = this.$refs.luIncidentVO_type.getSelectValue();
                tempParam.luIncidentVO_scale = this.$refs.luIncidentVO_scale.getSelectValue();
                tempParam.luIncidentVO_thinPlace = this.$refs.luIncidentVO_thinPlace.getSelectValue();
                //TODO 查询条件的表单数据
                //1. 如果是单纯的对象，直接传入
                //2. 如果对象中还包含了对象，就需要复杂处理

                let params = JSON.parse(JSON.stringify(this.$refs.recursive.getModel()));
                // let params = JSON.parse(JSON.stringify(this.models));

                /*
                   params.sortType = 'registerTime';
                   params.direction = 'DESC';
                   params.pageNum = this.pageNum;
                   params.pageSize = this.pageSize;
                   params.codeStr = '';
                   params.luIncidentVO = {};
                   params.luIncidentVO.registerTime= params.datetime1.join(',');
                   params.luIncidentVO.thinPlace= params.luIncidentVO_thinPlace;
                   params.luIncidentVO.type = params.luIncidentVO_type;
                   params.luIncidentVO.scale = params.luIncidentVO_scale;
                   params.luIncidentVO.referPersons = params.luIncidentVO_referPersons;
                   params.luIncidentVO.name = params.luIncidentVO_name;
                   delete params.datetime1;
                   delete params.luIncidentVO_thinPlace;
                   delete params.luIncidentVO_type;
                   delete params.luIncidentVO_scale;
                   delete params.luIncidentVO_referPersons;
                   delete params.luIncidentVO_name;*/
                //3.url拼接
                let params1 = [];
                params1.push("sortType=registerTime");
                params1.push("direction=DESC");
                params1.push("pageNum="+this.pageNum);
                params1.push("pageSize="+this.pageSize);
                params1.push("codeStr="+"");
                params1.push("luIncidentVO.registerTime="+params.datetime1.join(','));
                params1.push("luIncidentVO.thinPlace="+params.luIncidentVO_thinPlace);
                params1.push("luIncidentVO.scale="+params.luIncidentVO_scale);
                params1.push("luIncidentVO.type="+params.luIncidentVO_type);
                params1.push("luIncidentVO.referPersons="+params.luIncidentVO_referPersons);
                params1.push("luIncidentVO.name="+params.luIncidentVO_name);
                let from = params1.join("&");
                //---
                // this.models.text='text';
                console.log(this.models)
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        searchManyConditions(from).then(res=>{
                            if(res.data.result.content){
                                this.tabData = res.data.result.content;
                            }
                        });

                    }else {
                        console.log(valid)
                    }
                });
            },
            resetParam(formName){
                console.log('reset--')
                console.log(this.$refs[formName])
                console.log(this.$refs[formName].resetFields())
                this.models.text = "text";
                //TODO 自定义的组件手动清空
                this.$refs.luIncidentVO_type.clearSelectValue();
                this.$refs.luIncidentVO_scale.clearSelectValue();
                this.$refs.luIncidentVO_thinPlace.clearSelectValue();
                let self  =this;
                if (self.$refs[formName] !== undefined) {
                    self.$refs[formName].resetFields();
                }
            },
            //==========================
            handleOpen(index, row, type) {
                this.dialogType = type;
                this.dataDetail = row;
                this.dialogVisible = !this.dialogVisible;
            },
            handleColos() {
                this.dialogVisible = !this.dialogVisible;
            },
            handleSubmit(item) {
                console.log(JSON.stringify(item));
            },
            //分页大小的函数
            handleSizeChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
            //分页页码的函数
            handleCurrentChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
            //多选时触发
            handleSelectionChange(val) {
                this.$message({
                    message: val,
                    type: 'success'
                });
            },
        // 时间控件，删除【清空】按钮
            removeClearText(removeClear){
                if (removeClear) {
                    setTimeout(() => {
                        let item = document.getElementsByClassName('el-button--text');
                        if (item.length > 0) {
                            item[0].remove()
                        }
                    }, 200)
                }
            }
        },
        mounted() {
            // this.searchData();
        }
    }
</script>

<style scoped>

</style>


<style>
    /*//  table*/
    /*//头部行样式*/
    .m-header-row-style{
        height: 36px !important;
        color: #959aaa !important;
    }
    /*//头部列样式*/
    .m-header-cell-style{
        padding: 0 !important;
        background-color: #eff2f7 !important;
        color: #334266 !important;
    }
    /*//table行样式*/
    .m-row-style{
        height: 36px !important;
    }
    /*//table列样式*/
    .m-cell-style{
        padding: 0 !important;
    }
</style>